import { useDispatch, useSelector } from 'react-redux';
import { getChannels } from '@/store/actions';
import { useEffect } from 'react';

import { Select } from 'antd';
const { Option } = Select;

const Channel = (props) => {
  const dispatch = useDispatch(); // dispatch

  const channels = useSelector((state) => state.article.channels); // 频道数据

  // 组件首次渲染
  useEffect(() => {
    dispatch(getChannels());
  }, [dispatch]);

  return (
    <Select
      value={props.value}
      onChange={props.onChange}
      placeholder="请选择文章频道"
      style={{ width: props.width ? props.width : 120 }}
    >
      {channels.map((item) => (
        <Option key={item.id} value={item.id}>
          {item.name}
        </Option>
      ))}
    </Select>
  );
};

export default Channel;
